<!--banner-->
<div class="w230 h690 fl mr20">
	<div class="banner mt20">
		<div class="banner-img">
			<ul class="imglist">
				<li style='display: block;'>
					<a href='#'><img src="<{$style_dir}>/img/banner/1.jpg" alt="banner"/></a>
				</li>
				<li>
					<a href='#'><img src="<{$style_dir}>/img/banner/2.jpg" alt="banner"/></a>
				</li>
				<li>
					<a href='#'><img src="<{$style_dir}>/img/banner/3.jpg" alt="banner"/></a>
				</li>
				<li>
					<a href='#'><img src="<{$style_dir}>/img/banner/4.jpg" alt="banner"/></a>
				</li>
			</ul>
			<ul class="imgbtn">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
			<ul>
		</div>
	</div>
</div>
<!--Banner jq-->
<script type="text/javascript">
	$(window).scroll(function(){
		var _top = $(window).scrollTop();
		if( _top >= 145 ){
			$(".banner").css('position','fixed');
			$(".banner").removeClass('mt20');
		}if( _top < 145 ){
			$(".banner").css('position','');
			$(".banner").addClass('mt20');
		};
	});
	
	var $btnLi = $('.banner-img ul.imgbtn li');
	var index = 0;
	var timer;
	$btnLi.hover(function(){
		index = $(this).index();
		fn();
	});
	$('.banner').hover(function(){
		clearInterval(timer);
	},function(){
		bannerauto();
	});
	function fn(){
		$btnLi.eq(index).addClass('on').siblings().removeClass('on');
		$('.banner-img ul.imglist li').eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
	};
	bannerauto();
	function bannerauto(){
		timer = setInterval(function(){
			index ++;
			index %= $btnLi.length;
			fn();
		},5000);
	}
</script>
